<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {ElEmpty} from 'element-plus'
import {ChatDotRound, Document, Tickets} from '@element-plus/icons-vue'
import {QuestionControllerService, RecentAcceptVO} from "../../../../generated";
import {useRoute} from "vue-router";

const activeTab = ref('submissions')

const tabs = [
  {name: 'submissions', label: '最近通过', icon: Document},
  {name: 'problemsets', label: '题集', icon: Tickets},
  {name: 'discussions', label: '讨论发布', icon: ChatDotRound}
]

let route = useRoute();
const submissions = ref<RecentAcceptVO[]>([])

onMounted(async () => {
  let res = await QuestionControllerService.listRecentAcceptQuestionsUsingGet(route.params.account as string);
  if (res.code === 0 && res.data) {
    submissions.value = res.data;
  }
})
</script>

<template>
  <div class="recent-activities">
    <div class="tabs-wrapper">
      <div class="tabs-header">
        <div v-for="tab in tabs"
             :key="tab.name"
             :class="['tab-item', { active: activeTab === tab.name }]"
             @click="activeTab = tab.name">
          <el-icon size="24px">
            <component :is="tab.icon"/>
          </el-icon>
          {{ tab.label }}
        </div>
      </div>
      <router-link
          v-if="activeTab === 'submissions' || activeTab === 'problemsets'"
          :to="activeTab === 'submissions' ? '/submissions' : '/problemsets'"
          class="view-all-link"
      >
        {{ activeTab === 'submissions' ? '所有提交记录' : '所有题集' }} >
      </router-link>
    </div>

    <div class="tab-content">
      <div v-if="activeTab === 'submissions'" class="table-container">
        <table class="submissions-table" v-if="submissions.length>0">
          <tbody>
          <tr v-for="(submission, index) in submissions"
              :key="submission.id"
              :class="{ 'striped': index % 2 === 0 }">
            <td class="problem-title">
              <router-link :to="`/question/detail/${submission.id}`" class="submission-title">{{
                  submission.title
                }}
              </router-link>
            </td>
            <td class="submission-time">{{ submission.time }}</td>
          </tr>
          </tbody>
        </table>
        <ElEmpty v-else description="暂无提交记录"/>
      </div>

      <ElEmpty v-else-if="activeTab === 'problemsets'" description="暂无题集"/>
      <ElEmpty v-else description="暂无讨论"/>
    </div>
  </div>
</template>

<style scoped>
.recent-activities {
  padding: 16px;
}

.tabs-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tabs-header {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-item.active {
  background-color: #000a2008;
  color: #333;
  font-weight: 500;
}

:deep(.el-icon) {
  font-size: 16px;
}

.table-container {
  margin: 16px 0;
}

.submissions-table {
  width: 100%;
  border-collapse: collapse;
}

.submissions-table tr {
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
}

.submissions-table tr.striped {
  background-color: #000a2008;
  border-radius: 5px;
}

.submissions-table td {
  padding: 8px 16px;
}

.submissions-table td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.submissions-table td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.submission-title {
  font-size: 14px;
  color: rgb(38, 38, 38);
  font-weight: 500;
  overflow: hidden;
  text-decoration: none;
}

.problem-title {
  text-align: left;
}

.submission-time {
  font-size: 14px;
  color: #3c3c4399;
  text-align: right;
  white-space: nowrap;
}

.view-all-link {
  font-size: 12px;
  color: #3c3c4399;
  font-weight: 500;
  text-decoration: none;
}

.view-all-link:hover {
  color: #262626bf;
}
</style> 